<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { Auth } from '@/api/auth/types'

import EditAuth from './components/editAuth.vue'

import { asyncRoutes } from '@/router'

import { ref } from 'vue'
import { useConfirm } from '@/hooks/useConfirm'

// 正则提取组件路径
const filterComponent = (component: string) => {
	const temp = String(component).match(/\(\) => import\("(.+\.vue)/)
	return temp ? temp[1] : ''
}

// 编辑权限逻辑
const eidtAuthRef = ref()
const handleEditAuth = (row: Auth) => {
	eidtAuthRef.value.status = true
	Object.assign(eidtAuthRef.value.formData, {
		path: row.path
	})
}

// 删除权限
const handleDelete = (id: number | string) => {
	console.log(id)
	useConfirm()
}
</script>

<template>
	<QfBox :filter="false">
		<!-- 内容 -->
		<!-- 逻辑/页面组件 -->
		<EditAuth ref="eidtAuthRef" />
		<!-- 逻辑/页面组件 -->

		<!-- 表格 -->
		<el-table :data="asyncRoutes" :border="true" row-key="id" default-expand-all>
			<el-table-column align="center" label="权限名称">
				<template #default="scope">
					{{ scope.row.meta.title }}
				</template>
			</el-table-column>
			<el-table-column align="center" prop="path" label="路由"> </el-table-column>
			<el-table-column align="center" label="种类">
				<el-tag type="success">菜单</el-tag>
				<!-- <el-tag type="danger">按钮</el-tag> -->
			</el-table-column>
			<el-table-column align="center" label="组件缓存" width="90">
				<!-- <template #default="scope">
					<el-switch
						v-model="tableData.data[scope.$index].state"
						:active-value="0"
						:inactive-value="1"
						inline-prompt
						style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
						active-text="未冻结"
						inactive-text="已冻结"
					/>
				</template> -->
				<el-switch
					:active-value="0"
					:inactive-value="1"
					inline-prompt
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
					active-text="未缓存"
					inactive-text="已缓存"
				/>
			</el-table-column>
			<el-table-column align="center" label="组件路径">
				<template #default="scope">
					{{ filterComponent(scope.row.component) }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" fixed="right" width="240">
				<template #default="scope">
					<el-button type="primary" size="small" @click="handleEditAuth(scope.row)">
						<span class="iconfont icon-bianji"></span>
					</el-button>
					<el-button type="danger" size="small" @click="handleDelete(1)"
						><span class="iconfont icon-shanchu"></span>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 表格 -->
		<!-- 内容 -->
	</QfBox>
</template>

<style lang="scss" scoped></style>
